<template>
  <div>
    <el-dialog
      title="任务详情"
      :visible="visible"
      :before-close="handleClose"
      append-to-body
      width="80%"
    >
      <div class="container">
        <TaskDetails
          :left-card-list="leftCardList"
          :project-title="projectTitle"
          :render-data="renderData"
          :users-info="usersInfo"
        />
        <My-Comment-List
          v-show="commentList.length"
          :list="commentList"
          style="margin-top: 20px;"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getHeaderByTableId,
  findModelFormTableInfo,
  listComment,
  findUserById
} from '@/api/dynamicInterface';
import TaskDetails from './TaskDetails.vue';
import MyCommentList from '@/views/digitalReportQr1/components/MyCommentList';

import p from '@/utils/processRequest1';

const config = () => {
  return p().then(({ url }) => {
    return Promise.resolve(url);
  });
};

const getImgUrl = async function({ id, fileName }) {
  const ApiUrl = await config();
  return ApiUrl + '/file/downloadById' + `?id=${id}&fileName=${fileName}`;
};

export default {
  components: {
    MyCommentList,
    TaskDetails
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },

    state: {
      type: Object,
      default: () => ({})
    },

    modelId: {
      type: [String, Number],
      default: ''
    },

    leftCardList: {
      type: Array,
      default: () => ([])
    },
    projectTitle: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      loading: false,

      renderData: [],
      commentList: [],
      usersInfo: [],
      taskInfo: {}
    };
  },

  watch: {
    visible: {
      handler: function(v) {
        if (v) {
          this.init();
        }
      }
    }
  },

  methods: {
    init() {
      const { state } = this;
      const { item } = state;
      this.clear();
      this.getData();
      this.getUsersInfo(item.toUsers);
      this.getListComment(item.acceptanceFormNum.split('_')[0]);
    },

    getListComment(taskGuid) {
      listComment({ taskGuid }).then(async(res) => {
        const { success, data } = res;
        if (success) {
          for (let i = 0; i < data.length; i++) {
            const item = data[i];
            const {
              annexIds
            } = item;
            item.photolist = [];

            if (annexIds && annexIds.length) {
              for (let j = 0; j < annexIds.length; j++) {
                const fileInfo = annexIds[j];
                const {
                  id,
                  originName: fileName
                } = fileInfo;

                await getImgUrl({
                  id, fileName
                }).then(url => {
                  item.photolist.push({
                    ...fileInfo,
                    img: url
                  });
                });
              }
            }
          }
          this.commentList = data;
        }
      });
    },

    getData() {
      const { state } = this;
      const { item } = state;

      if (item) {
        const {
          acceptanceFormNum: formGuid
        } = item;

        findModelFormTableInfo({
          formGuid
        }).then(res => {
          const { success, data } = res;
          if (success) {
            // 模板内容设置 id
            const mbItem = data.children.find(item => item.tableName.includes('模板内容'));
            const mbId = mbItem && mbItem.id;

            if (mbId) {
              this.getHeaderData({
                tableId: mbId,
                formGuid
              });
            }
          }
        });
      }
    },

    // 获取参与人
    async getUsersInfo(toUsers) {
      const usersInfo = [];
      if (toUsers) {
        for (let i = 0; i < toUsers.length; i++) {
          const id = toUsers[i];
          await findUserById({ id }).then(res => {
            const { success, data } = res;
            if (success) {
              usersInfo.push(data);
            }
            return Promise.resolve(res);
          });
        }

        this.usersInfo = usersInfo;
      }
    },

    getHeaderData(data) {
      getHeaderByTableId(data).then(res => {
        const { success, data } = res;
        if (success) {
          const {
            bodys
          } = data;

          let headers = data.headers;
          const raw = bodys.length && bodys[0] || {};

          headers = headers.filter(item => item.status !== 1);
          headers.forEach((o, i) => {
            const { dataIndex } = o;
            o.myValue = raw[dataIndex] || '';
          });

          this.renderData = headers;
        }
      });
    },

    clear() {
      this.renderData = [];
      this.commentList = [];
      this.usersInfo = [];
    },

    handleClose() {
      this.$emit('update:visible', false);
    },

    handleOk() {}
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 250px;
  max-height: 450px;
  overflow: auto;
}
</style>
